<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 以前学的代码都是从上往下进行执行的，同步代码
    // 也有的时候，并不是从上往下的。异步代码(数据请求/读取文件/定时器)
    // js是单线程的，首先执行所有的同步任务，异步任务挂起。等所有的同步任务结束，异步任务同时开启，那么谁快就先得到谁的结果
    // 如果希望异步的任务可以按照我们的设想的执行顺序去执行，那么就需要去解决异步的问题

    // 第一种方案是用回调函数
    // 回调函数会让代码有一种从左往右的感觉
    // 回调函数会让代码高度耦合，有可能不好判断在哪里出错


    // 这是传统的数据请求的代码

    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://cnodejs.org/api/v1/topics');
    xhr.send();
    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText)); // 数据一
        const xhr2 = new XMLHttpRequest();
          xhr2.open('GET', 'https://cnodejs.org/api/v1/topic/61f69e4aa08b39f75309c2a8');
          xhr2.send();
          xhr2.onload = function() {
            if (xhr2.status === 200) {
              console.log(JSON.parse(xhr2.responseText)); // 数据二
            } else {
              console.error('请求失败', xhr2.status);
            }
          };
      } else {
        console.error('请求失败', xhr.status);
      }
    };

    // const xhr2 = new XMLHttpRequest();
    // xhr2.open('GET', 'https://cnodejs.org/api/v1/topic/61f69e4aa08b39f75309c2a8');
    // xhr2.send();
    // xhr2.onload = function() {
    //   if (xhr2.status === 200) {
    //     console.log(JSON.parse(xhr2.responseText)); // 数据二
    //   } else {
    //     console.error('请求失败', xhr2.status);
    //   }
    // };
    
    

    console.log(123456);
    
  </script>
</body>
</html>